<template>
  <div class="table-basic-vue frame-page h-panel">
    <div class="h-panel-bar"><span class="h-panel-title">宝贝管理</span></div>
    <div class="h-panel-body">
      <div>
        <Tabs :datas="tabs" className="common-status-filter-tabs" v-model="status" @change="selectTypeHandle">
          <template v-slot:item="{ tab }">
            <p class="code">{{ tab.num || 0 }}</p>
            <p class="name">{{ tab.title }}</p>
          </template>
        </Tabs>
      </div>
      <div class="common-filter-bar">
        <div class="float-left">
          <Search :width="400" v-model="keyword" @search="getData(true)" placeholder="请输入" showSearchButton></Search>
        </div>
      </div>
      <Table :loading="loading" :datas="datas">
        <TableItem :width="100" title="宝贝ID">
          <template v-slot="{ index }">{{ index + 1 }} </template>
        </TableItem>
        <TableItem :width="200" prop="name" title="主图"></TableItem>
        <TableItem :width="200" prop="name" title="宝贝名称"></TableItem>
        <TableItem :width="200" prop="salary" title="售价"></TableItem>
        <TableItem :width="200" prop="country" title="规格"></TableItem>
        <TableItem :width="200" title="状态">
          <template v-slot="{ data }">
            <h-switch v-model="data.status" @change="changeStatusHandle">
              <template v-slot:open>在售</template>
              <template v-slot:close>停售</template>
            </h-switch>
          </template>
        </TableItem>
        <TableItem :width="200" prop="city" title="添加时间"></TableItem>
        <TableItem :width="200" title="操作">
          <template v-slot="{ data }">
            <button class="h-btn h-btn-blue" @click="openDetail(data)" size="xs"><i class="h-icon-info"></i><span>详情</span></button>
            <button class="h-btn h-btn-yellow" @click="openEdit(data)" size="xs"><i class="h-icon-edit"></i><span>编辑</span></button>
          </template>
        </TableItem>
      </Table>
      <Space :height="10" />
      <Pagination v-if="pagination.total > 0" align="right" v-model="pagination" @change="changePage" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyword: '',
      sort: 'updatedAt:desc',
      pagination: {
        page: 1,
        size: 20,
        total: 1
      },
      tabs: [
        { key: 0, title: '全部', num: 10 },
        { key: 1, title: '正在出售', num: 10 },
        { key: 2, title: '准备出售', num: 2 },
        { key: 3, title: '已经停售', num: 0 }
      ],
      status: 0,
      datas: [{ name: 'Dakota Rice', salary: '$36,738', country: 'Niger', city: 'Oud-Turnhout', status: true }],
      counts: {},
      loading: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getData();
    },
    changePage() {
      this.getData(true);
    },
    selectTypeHandle() {
      console.log(this.status);
    },
    changeStatusHandle(e) {
      console.log(e);
    },
    openDetail(data) {
      console.log(data);
    },
    openEdit(data) {
      console.log(data);
    },
    getData(reload = false) {
      if (reload) {
        this.pagination.page = 1;
      }
      //   this.loading = true;
      //   setTimeout(() => {
      //     this.datas = [
      //       { name: 'Dakota Rice', salary: '$36,738', country: 'Niger', city: 'Oud-Turnhout' },
      //       { name: 'Minerva Hooper', salary: '$23,789', country: 'Curaçao', city: 'Sinaai-Waas' },
      //       { name: 'Sage Rodriguez', salary: '$56,142', country: 'Netherlands', city: 'Baileux' },
      //       { name: 'Philip Chaney', salary: '$38,735', country: 'Korea, South', city: 'Overland Park' },
      //       { name: 'Doris Greene', salary: '$63,542', country: 'Malawi', city: 'Feldkirchen in Kärnten' },
      //       { name: 'Mason Porter', salary: '$78,615', country: 'Chile', city: 'Gloucester' },
      //       { name: 'Dakota Rice', salary: '$36,738', country: 'Niger', city: 'Oud-Turnhout' },
      //       { name: 'Minerva Hooper', salary: '$23,789', country: 'Curaçao', city: 'Sinaai-Waas' },
      //       { name: 'Sage Rodriguez', salary: '$56,142', country: 'Netherlands', city: 'Baileux' },
      //       { name: 'Philip Chaney', salary: '$38,735', country: 'Korea, South', city: 'Overland Park' },
      //       { name: 'Doris Greene', salary: '$63,542', country: 'Malawi', city: 'Feldkirchen in Kärnten' },
      //       { name: 'Mason Porter', salary: '$78,615', country: 'Chile', city: 'Gloucester' }
      //     ];
      //     this.pagination.total = 100;
      //     this.loading = false;
      //   }, 1000);
    }
  },
  computed: {}
};
</script>
<style lang="less" scoped>
:deep(.h-switch) {
  line-height: 20px;
  .h-switch-span {
    height: 20px;
    .h-switch-inner {
      height: 20px;
      line-height: 20px;
    }
    &:after {
      height: 17px;
      line-height: 20px;
    }
  }
}
</style>
